<template>
  <div>
    <div id="selCountry" :class="modalClass" @click="hide">
      <div id="content" @click.stop="">
        <p class="p1">
          <input type="text" v-model="search" placeholder="输入名称 / 区域码，快速查找" @input="inputChange">
        </p>
        <div>
          <div id="scl">
            <ul>
              <li v-for="(item , index ) in selectArea" class="hoverhand" @click="chose(item , index)">
                <span class="floatleft">{{item.name_cn}}</span>
                <span class="floatright">+{{item.area_code}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  //区域列表选择
  export default {
    name:'SelectCountry',
    data(){
      return{
        areaList : [],//所有的区域列表
        selectArea : [],//搜索筛选的列表
        search : '',
        showCps : false,
        modalClass : 'modal-hide'
      }
    },
    methods:{
      getAreaList( areaList ){
        this.areaList = areaList || [];
        this.selectArea = this.areaList;
        this.search = null;
        // require('../common/js/storage').set('arealist' , areaList);
        this.show();
      },
      inputChange(){
        let thiz = this;
        let search = thiz.search.replace(/\s+/g,""); //去除空格
        if( search ){
          let newList = [];
          thiz.for( thiz.areaList , (item , index) => {
            let is_name_cn = item.name_cn.indexOf(search) != -1; //查询中文名
            let is_iso_code =  item.iso_code.indexOf(search) != -1; //查询iso_code
            let is_area_code =  item.area_code.indexOf(search) != -1; //查询区域code
            if( is_iso_code || is_name_cn || is_area_code){
              newList.push(item);
            }
          });
          thiz.selectArea = newList;
        } else {
          thiz.selectArea = thiz.areaList;
        }
      },
      show(){
        this.modalClass = 'modal-show';
        let scl = document.querySelector('#scl');
        scl.scrollTop = 0;
        scl = null;
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      chose(item , index){
        this.$emit('chosed' , { item : item , index : index });
        this.hide();
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  #selCountry{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content{
    width: 500px;height: 500px;margin-top: -250px;margin-left: -250px;left: 50%;top: 50%;padding: 20px 0;
    overflow:hidden;background: #f0f2f5;.borderRadius;position: absolute;
    .p1{
      padding: 0 20px;
      input{
        .input();.placeholder();
      }
    }
    >div{
      height: calc( 100% - 60px );margin-top: 5px;padding: 0 10px;
      >div{
        padding: 0 10px;overflow-x: hidden;overflow-y: scroll;height: 100%;
      }
      ul{
        display: block;width: 100%;padding-top: 10px;
      }
      li{
        display: inline-block;height: 40px;.bgFFF;.overHidden;width: 100%;margin-top: 10px;padding: 0 15px;.borderRadius();
        >span{
          line-height: 40px;font-size: 14px;
        }
        >span:first-child{
          color: #1890ff;
        }
      }
      li:first-child{
        margin-top: 0px;
      }
      li:hover{
        cursor: pointer;
        box-shadow: 0 0 5px 3px rgba(24, 144, 255, 0.1);
      }
    }
  }
  #content>div>div{
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  #content>div>div::-webkit-scrollbar {width:2px; height:2px; background-color:transparent;}
  #content>div>div::-webkit-scrollbar-track {background-color:transparent; border-radius:2px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);}
  #content>div>div::-webkit-scrollbar-thumb {background-color: transparent; border-radius:2px; -webkit-box-shadow:inset 0 0 6px rgba(24, 144, 255, 1);}
  @import "../common/style/animate.css";
</style>
